<template>
	<base-page ref="basePage" @submit="handleSubmit">
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		v-for="(form, i) in subsectionForm.staticData" :key="'static' + i"
		:style="{'background-color': skinColor.color_bg_1}">
			<view class="y-flex y-row y-align-center mb-20">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">静态分栏 - {{i + 1}}</text>
				<com-icon name="close" size="30rpx" :color="skinColor.color_1" @click="handleCloseStaticData(i)"></com-icon>
			</view>
			<form-item
			v-model="form.label"
			type="text"
			label="分栏名称"
			required
			:padding-show="false"
			:disabled="disabled"></form-item>
			<view class="position-relative y-flex y-row y-align-center border-bottom-1 pt-20 pb-20"
			:style="{'border-bottom-color': skinColor.color_gap_1}"
			 v-for="(item, index) in form.children" :key="index">
				<view class="y-flex y-flex-1">
					<text class="fs-26" :style="{color: skinColor.color_3}">选项标题</text>
					<input class="fs-26 mt-20" type="text" v-model="item.label" placeholder="输入选项标题" :style="{color: skinColor.color_1}">
				</view>
				<view class="y-flex y-flex-1">
					<text class="fs-26" :style="{color: skinColor.color_3}">选项值</text>
					<input class="fs-26 mt-20" type="text" v-model="item.value" placeholder="输入选项值" :style="{color: skinColor.color_1}">
				</view>
				<com-icon class="position-absolute right-20 top-20" name="close" size="30rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseStaticChildren(i, index)"></com-icon>
			</view>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddStaticChildren(i)">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加选项静态数据</text>
			</view>
		</view>
		<view class="y-flex y-row y-align-center y-justify-center mt-30 mb-10" @tap="handleAddStaticData">
			<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
			<text class="fs-30" :style="{color: skinColor.color_1}">添加分栏静态数据</text>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">动态分栏请求</text>
			<form-item
			v-for="(key, i) in Object.keys(subsectionForm.request)"
			Key="i"
			closeable
			v-model="subsectionForm.request[key]"
			:type="request[key].type"
			:label="request[key].label"
			:disabled="disabled"
			:padding-show="false"
			@close="handleCloseRequest('subsectionForm', key)"></form-item>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		v-for="(form, i) in subsectionForm.dynamicData" :key="'dynamic' + i"
		:style="{'background-color': skinColor.color_bg_1}">
			<view class="y-flex y-row y-align-center mb-20">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">动态分栏 - {{i + 1}}</text>
				<com-icon name="close" size="30rpx" :color="skinColor.color_1" @click="handleCloseDynamicData(i)"></com-icon>
			</view>
			<form-item
			v-model="form.label"
			type="rule"
			label="分栏名称规则"
			required
			:padding-show="false"
			:disabled="disabled"></form-item>
			<form-item
			v-model="form.children[key]"
			v-for="(key, index) in Object.keys(form.children)"
			:key="index"
			type="rule"
			:padding-show="false"
			:label="(subsectionData[key] ? subsectionData[key].label : dynamicSubsectionData[key].label) + '规则'"
			:disabled="disabled"></form-item>
		</view>
		<view class="y-flex y-row y-align-center y-justify-center mt-30 mb-10" @tap="handleAddDynamicData">
			<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
			<text class="fs-30" :style="{color: skinColor.color_1}">添加分栏动态数据</text>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">components组件</text>
			<com-cell
			v-for="(item, index) in componentForm"
			:key="index"
			:title="'组件' + (index+1) + ' - ' + component[item.name].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditComponent(item, index)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseComponent($event, index)"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddComponent">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加组件</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">cell单元格</text>
			<com-cell
			v-if="cellForm && (cellForm.dynamicData || cellForm.staticData || cellForm.style)"
			:title="cell[cellForm.style.cellName || 'h-cell'].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditCell(cellForm)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseCell"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddCell" v-else>
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加单元格</text>
			</view>
		</view>
	</base-page>
</template>

<script>
	import BasePage from './base.vue'
	import FormHeader from '../components/Header.vue'
	import FormItem from '../components/FormItem.vue'
	import { Component, Cell, Request, Page } from '@/assets/js/interface.js'
	export default {
		components: { BasePage, FormHeader, FormItem },
		inject: ['getSkinColor', 'getQuery', 'selectOptions', 'selectIcon', 'Router', 'deepClone', 'deleteProperty'],
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.query.type
			},
			subsectionData () {
				return Page[this.type].subsectionData
			},
			dynamicSubsectionData () {
				return Page[this.type].dynamicSubsectionData
			},
			component () {
				return Component
			},
			cell () {
				return Cell
			},
			request () {
				return Request
			},
			staticData () {
				const obj = {}
				Object.keys(this.subsectionData).forEach(key => {
					obj[key] = this.subsectionData[key].value
				})
				return obj
			},
			dynamicData () {
				const obj = {}
				Object.keys(this.dynamicSubsectionData).forEach(key => {
					obj[key] = this.dynamicSubsectionData[key].value
				})
				return {...obj, ...this.staticData}
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				subsectionForm: {},
				componentForm: [],
				cellForm: {}
			}
		},
		created() {
			if ( this.originForm ) {
				this.subsectionForm = this.originForm.subsection || {}
				this.subsectionForm.request = this.subsectionForm.request || {}
				this.componentForm = this.originForm.components || []
				this.cellForm = this.originForm.cell || {}
			}
		},
		methods: {
			onShow () {
				uni.$off('componentSelect')
				uni.$off('cellSelect')
			},
			handleAddStaticData () {
				if ( !this.subsectionForm.staticData ) this.$set(this.subsectionForm, 'staticData', [])
				this.subsectionForm.staticData.push({
					label: '',
					children: []
				})
			},
			handleCloseStaticData (index) {
				this.subsectionForm.staticData.splice(index, 1)
			},
			handleAddStaticChildren (i) {
				if ( !this.subsectionForm.staticData[i].children )this.$set(this.subsectionForm.staticData[i], 'children', [])
				this.subsectionForm.staticData[i].children.push(this.deepClone(this.staticData))
			},
			handleCloseStaticChildren (i, index) {
				this.subsectionForm.staticData[i].children.splice(index, 1)
			},
			handleAddDynamicData () {
				if ( !this.subsectionForm.dynamicData ) this.$set(this.subsectionForm, 'dynamicData', [])
				this.subsectionForm.dynamicData.push({
					label: '',
					children: this.deepClone(this.dynamicData)
				})
			},
			handleCloseDynamicData (index) {
				this.subsectionForm.dynamicData.splice(index, 1)
			},
			handleRequestSelect () {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的属性',
					actions: Object.keys(this.request).filter(key => Object.keys(this.subsectionForm.request).indexOf(key) == -1).map(key => this.request[key].label),
					success: res => {
						const keys = Object.keys(this.request)
						const index = keys.findIndex(key => this.request[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this.subsectionForm.request, key, this.request[key].value)
					}
				})
			},
			handleCloseRequest (formName, k) {
				this.$set(this[formName], 'request', this.deleteProperty(this[formName].request, k))
			},
			handleAddComponent () {
				if ( this.disabled ) return
				const component = Object.assign({}, this.component, {'sub-card': {'label': '分段卡片'}})
				const keys = Object.keys(component)
				this.selectOptions({
					title: '需要添加什么类型的组件',
					actions: keys.map(key => component[key].label),
					success: res => {
						const index = keys.findIndex(key => component[key].label == res.detail.label)
						const key = keys[index]
						uni.$once('componentSelect', data => {
							this.componentForm.push(data)
						})
						this.Router.push({path: '/pages/program/form/comp/index', query: {type: key}})
					}
				})
			},
			handleEditComponent (item, index) {
				uni.$once('componentSelect', data => {
					this.$set(this.componentForm, index, data)
				})
				this.Router.push({path: '/pages/program/form/comp/index', query: {type: item.name, form: item, disabled: this.disabled}})
			},
			handleCloseComponent (e, index) {
				 e.stopPropagation && e.stopPropagation()
				 this.componentForm.splice(index, 1)
			},
			handleAddCell () {
				if ( this.disabled ) return
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell'})
			},
			handleEditCell (item) {
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell', query: {form: item, disabled: this.disabled}})
			},
			handleCloseCell (e) {
				 e.stopPropagation && e.stopPropagation()
				 this.cellForm = {}
			},
			handleSubmit (form) {
				this.$emit('submit', Object.assign({}, form, {subsection: this.subsectionForm, components: this.componentForm, cell: this.cellForm}))
			}
		}
	}
</script>

<style>

</style>